/**
 * useLayoutEffect
 *
 * useLayoutEffect 与 useEffect 签名一样
 *
 * 语法：
 *    useLayoutEffect(callback, [])
 *
 * 需求：当我重置为0时，不希望页面出现0
 * 方案1： 使用 useEffect 在 count === 0 时，立即做修改。
 * 问题1： 页面快速的闪动0
 * 原因1：
 *    useEffect 的回调的执行时机问题
 *    更新阶段：状态变化 -> 组件重新渲染 -> 得到一份新的虚拟DOM -> 渲染真实DOM -> useEffect 回调才执行
 *
 * 方案2： 用 useLayoutEffect 替换 useEffect
 *    更新阶段：状态变化 -> 组件重新渲染 -> 得到一份新的虚拟DOM -> useLayoutEffect 回调才执行 -> 会同步等待 useLayoutEffect 代码执行完 -> 渲染真实DOM
 */

import React, { useEffect, useLayoutEffect, useState } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [count, setCount] = useState(99);

  useLayoutEffect(() => {
    console.log("useEffect - 回调", document.querySelector("h1").innerHTML);
    if (count === 0) {
      setCount(Math.random());
    }
  }, [count]);

  return (
    <div>
      <button
        onClick={() => {
          setCount(0);
        }}
      >
        重置count为0
      </button>
      <h1 id="h1">App - {count}</h1>
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
